<template>
   <div class="container" @click="hideGallary">
     <div class="warrper">
       <swiper :options="swiperOption">
         <!-- slides -->
         <swiper-slide v-for="(item,index) in imgs" :key="index">
           <img class='w-img' :src="item">
         </swiper-slide>
         <!-- Optional controls -->
         <div class="swiper-pagination"  slot="pagination" ref="swiper"></div>
       </swiper>
     </div>
   </div>
</template>

<script>
    export default {
        name: "gallary",
        props:{
          imgs:{
            type:Array,
            default:[]
          }
        },
        data(){
          return{
            swiperOption: {
              pagination: {
                el: '.swiper-pagination',
                type:'fraction'
              },
              observer:true,
              observeParents:true,
              notNextTick: true
            },
          }
        },
      methods:{
        hideGallary(){
          this.$emit('close')
        }
      }
    }
</script>

<style scoped lang="stylus">
  .container >>> .swiper-container
    overflow inherit
    display flex
    flex-direction:column
    justify-content center
  .container
    z-index 100
    display flex
    flex-direction:column
    justify-content center
    position fixed
    top:0
    left:0
    bottom 0
    right 0
    background #000
    .warrper
      width: 100%
      position absolute
      top: 50%
      transform translate(-50%,-50%)
      left: 50%
      .w-img
        width:100%
      .swiper-pagination
        color #fff
        bottom -100px
        font-size 12px

</style>
